import Vue from "vue";

import App from "./App.vue";

import Home from "./components/Home.vue";
import Cart from "./components/Cart.vue";
import Shop from "./components/Shop.vue";

Vue.component("Home", Home);
Vue.component("Cart", Cart);
Vue.component("Shop", Shop);

Vue.mixin({
  data() {
    return {
      globalTitle: "hello mixin",
    };
  },
  computed: {
    globalCount() {
      return 100;
    },
  },
  methods: {
    globalLog(e) {
      console.log(e);
    },
  },
});

// v-style
// Vue.directive("style", {
//   inserted: function (el) {
//     // el 获取绑定指令的dom元素
//     console.log(el);
//     el.style.color = "red";
//   },
//   unbind: function () {
//     console.log("unbind");
//   },
// });

Vue.directive("style", {
  inserted: function (el, binding) {
    // el 获取绑定指令的dom元素
    /*
      1. 通过指令参数实现属性参数的传递
      2. 通过指令表达式实现样式属性值的设置
      3. 通过修饰符是否存在，设置不同样式
    */
    const { arg, value, modifiers } = binding;
    console.log(binding);
    el.style[arg] = value;
    if (modifiers.b) {
      el.style.fontWeight = "bold";
    }
    if (modifiers.i) {
      el.style.fontStyle = "italic";
    }
    if (modifiers.u) {
      el.style.textDecoration = "underline";
    }
  },
});

let h = null;
Vue.directive("clock", {
  inserted(el) {
    h = setInterval(() => {
      console.log("hello");
      const d = new Date();
      el.innerHTML = `${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`;
    }, 1000);
  },
  unbind() {
    clearInterval(h);
  },
});

new Vue({
  el: "#app",
  render: (h) => h(App),
});
